Layout 結束後，便會正式將畫面 Paint 到螢幕上，聽起來很容易，但事實上並沒有這麼簡單。

首先讓我們進行一個測試，假設有兩個 div ，CSS 分別為：

1. 第一個 div

width: 100px;
height: 100px;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0,5);
background-image: url(test.jpg);
opacity: 0.5

2. 第二個 div

width: 100px;
height: 100px;
background-color: white;

各位認為繪製哪一個 div 所需花費的時間較多呢？

第二個 div 繪製的形狀為長寬 100px ，背景白色的區塊。然而第一個 div 繪製的結果還多了陰影以及調整透明度，很明顯第一個 div 所需的時間是更多的。

透過這個例子，我們可以發現並不是 Paint 所有的區塊所需花費的時間都是一樣的。

有了這個概念後，讓我們談談 60 FPS 這個概念。（下圖為 Google I/O 2014 - Mobile Web performance auditing 這場 Talk 裡面的其中一張投影片）

60 FPS(Frames Per Second) 的概念是這樣的：你手中的 smartphone 螢幕的更新頻率大約為一秒六十次，而這過程必須將 60 個 frame（或稱 picture）置於畫面，也就是說必須在 16ms 內 create 一個 frame (60 frames / 1000ms)，如果無法在 16ms 內完成的話，便會讓使用者有種畫面動彈不得、無法流暢使用的感覺。想必各位應該都有過瀏覽頁面時畫面感覺好像卡住的經驗吧？這就是導致這個現象發生的原因。

無法順利在一秒內產生 60 個 frame ，就宛如遺失了 frame 一般，一般我們會稱這些遺失的 frame 為 jank。

下一篇我們會針對此部分作更詳盡的說明。